<template>
  <div class="temp-proj-feature-overlay">
    <div class="feature-overlay-content" v-if="isSpoil && !editing">
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="所属标段">所属标段：</div>
        <div
          class="feature-overlay-prop-value"
          :title="content.sectionName"
        >{{ content.sectionName }}</div>
      </div>
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="所属省">所属省：</div>
        <div class="feature-overlay-prop-value" :title="content.province">{{ content.province }}</div>
      </div>
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="所属市">所属市：</div>
        <div class="feature-overlay-prop-value" :title="content.city">{{ content.city }}</div>
      </div>
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="所属县">所属县：</div>
        <div class="feature-overlay-prop-value" :title="content.county">{{ content.county }}</div>
      </div>
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="渣场类型">渣场类型：</div>
        <div
          class="feature-overlay-prop-value"
          :title="content.borrowAreaTerrian"
        >{{ content.borrowAreaTerrian }}</div>
      </div>
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="堆高">堆高：</div>
        <div class="feature-overlay-prop-value" :title="content.stackHigh">{{ content.stackHigh }}</div>
      </div>
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="里程位置">里程位置：</div>
        <div class="feature-overlay-prop-value" :title="content.mileage">{{ content.mileage }}</div>
      </div>
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="相对位置">相对位置：</div>
        <div
          class="feature-overlay-prop-value"
          :title="content.relativeLocation"
        >{{ content.relativeLocation }}</div>
      </div>
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="下游有无敏感点或重要基础设施">下游有无敏感点或重要基础设施：</div>
        <div
          class="feature-overlay-prop-value"
          :title="content.downstreamMajor"
        >{{ content.downstreamMajor }}</div>
      </div>
    </div>
    <div class="feature-overlay-content" v-else-if="isFetch && !editing">
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="所属标段">所属标段：</div>
        <div
          class="feature-overlay-prop-value"
          :title="content.sectionName"
        >{{ content.sectionName }}</div>
      </div>
    </div>
    <div class="feature-overlay-content" v-else-if="isProdAndLivingArea && !editing">
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="所属标段">所属标段：</div>
        <div
          class="feature-overlay-prop-value"
          :title="content.sectionName"
        >{{ content.sectionName }}</div>
      </div>
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="所属省">所属省：</div>
        <div class="feature-overlay-prop-value" :title="content.province">{{ content.province }}</div>
      </div>
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="所属市">所属市：</div>
        <div class="feature-overlay-prop-value" :title="content.city">{{ content.city }}</div>
      </div>
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="所属县">所属县：</div>
        <div class="feature-overlay-prop-value" :title="content.county">{{ content.county }}</div>
      </div>
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="工程类型">工程类型：</div>
        <div
          class="feature-overlay-prop-value"
          :title="content.temporarySiteType"
        >{{ content.temporarySiteType }}</div>
      </div>
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="里程位置">里程位置：</div>
        <div class="feature-overlay-prop-value" :title="content.mileage">{{ content.mileage }}</div>
      </div>
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="相对位置">相对位置：</div>
        <div
          class="feature-overlay-prop-value"
          :title="content.relativeLocation"
        >{{ content.relativeLocation }}</div>
      </div>
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="相对距离">相对距离：</div>
        <div class="feature-overlay-prop-value" :title="content.distance">{{ content.distance }}</div>
      </div>
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="占地面积">占地面积：</div>
        <div class="feature-overlay-prop-value" :title="content.floorSpace">{{ content.floorSpace }}</div>
      </div>
    </div>
    <div class="feature-overlay-content" v-else-if="isOther && !editing">
      <div class="feature-overlay-prop-item">
        <div class="feature-overlay-prop-name" title="所属标段">所属标段：</div>
        <div
          class="feature-overlay-prop-value"
          :title="content.sectionName"
        >{{ content.sectionName }}</div>
      </div>
    </div>
    <div class="feature-overlay-content" v-else-if="editing">
      <el-form label-width="50px">
        <el-form-item label="名称:">
          <el-input size="small" v-model="editContent.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="标段:">
          <el-select
            size="small"
            placeholder="请选择标段"
            v-model="editContent.selectedSectionId"
            v-on:change="onSectionChangeListener"
          ></el-select>
        </el-form-item>
        <el-form-item label="关联:" v-if="!isOther">
          <el-select
            size="small"
            placeholder="请选择"
            v-model="editContent.selectedTempProjId"
            v-on:change="onTempProjChangeListener"
          ></el-select>
        </el-form-item>
        <el-form-item class="save-and-delete-form-item" label-width="0">
          <el-button class="save-button" type="success" size="small" v-on:click="saveFeature">保存</el-button>
          <el-popover placement="top" width="160" v-model="deletePopoverVisible">
            <p>确定删除这个元素吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="deletePopoverVisible = false">取消</el-button>
              <el-button type="danger" size="mini" @click="deleteFeature">确定</el-button>
            </div>
            <el-button type="danger" size="small" slot="reference">删除</el-button>
          </el-popover>
          <!-- <el-button type="danger" size="small" v-on:click="deleteFeature">删除</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapData, mapMethods } from "@/stores/map-store";

export default {
  name: "temp-proj-feature-overlay",
  props: {
    feature: Object,
    editing: Boolean
  },
  data() {
    return {
      store: {
        mapData,
        mapMethods
      },
      content: {},
      editContent: {
        name: this.feature.get("name"),
        selectedSectionId: this.feature.get("section_id"),
        selectedTempProjId: this.feature.get("id")
      },
      deletePopoverVisible: false
    };
  },
  computed: {
    isSpoil() {
      const _this = this;
      let isSpoil = false;
      let type = _this.feature.get("type");
      if (type === "spoil") {
        isSpoil = true;
      }
      return isSpoil;
    },
    isFetch() {
      const _this = this;
      let isFetch = false;
      let type = _this.feature.get("type");
      if (type === "fetch") {
        isFetch = true;
      }
      return isFetch;
    },
    isProdAndLivingArea() {
      const _this = this;
      let isProdAndLivingArea = false;
      let type = _this.feature.get("type");
      switch (type) {
        case "mixing":
        case "beam":
        case "sleeper":
        case "track":
        case "steel":
        case "transfer":
        case "temporary":
        case "camp": {
          isProdAndLivingArea = true;
          break;
        }
      }
      return isProdAndLivingArea;
    },
    isOther() {
      const _this = this;
      let isOther = false;
      let type = _this.feature.get("type");
      switch (type) {
        case undefined:
        case null:
        case "":
        case "other": {
          isOther = true;
          break;
        }
      }
      return isOther;
    }
  },
  mounted() {
    const _this = this;
    _this.initData();
  },
  methods: {
    initData() {
      const _this = this;
      _this.content = {
        sectionName: _this.feature.get("section_name")
      };
    },
    onSectionChangeListener() {},
    onTempProjChangeListener() {},
    saveFeature() {
      const _this = this;
      console.log(_this.editContent.name);
      _this.feature.set("name", _this.editContent.name);
      _this.feature.set("section_name", "");
      let id = _this.feature.getId();
      if (id) {
        _this.store.mapMethods
          .updateTemporaryProjectFeature(_this.feature)
          .then(response => {
            console.log(response);
          });
      } else {
        _this.store.mapMethods
          .addTemporaryProjectFeature(_this.feature)
          .then(response => {
            console.log(response.data);
          });
      }
    },
    deleteLocalFeature() {
      const _this = this;
      let type = _this.feature.get("type") || "other";
      let layerObj = _this.store.mapData.layers.temporaryProject[type];
      if (layerObj) {
        layerObj.layer.getSource().removeFeature(_this.feature);
        let index = layerObj.features.indexOf(_this.feature);
        if (index !== -1) {
          layerObj.features.splice(index, 1);
        }
      }
      _this.feature.dispatchEvent({ type: "removed" });
      _this.deletePopoverVisible = false;
    },
    deleteFeature() {
      const _this = this;
      let id = _this.feature.getId();
      if (id) {
        _this.store.mapMethods
          .deleteTemporaryProjectFeature(_this.feature)
          .then(response => {
            console.log(response);
            _this.deleteLocalFeature();
          });
      } else {
        _this.deleteLocalFeature();
      }
    }
  }
};
</script>

<style scoped>
.feature-overlay-content {
  width: 100%;
}

.feature-overlay-prop-item {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #efefef;
  border-left: 1px solid #efefef;
  border-right: 1px solid #efefef;
  line-height: 26px;
}

.feature-overlay-prop-name {
  width: 80px;
  text-align: right;
  border-right: 1px solid #efefef;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.feature-overlay-prop-value {
  width: 0;
  flex: 1;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 10px;
}

.el-form-item {
  margin-bottom: 0;
}

.save-and-delete-form-item {
  text-align: center;
}

.save-button {
  margin-right: 30px;
}
</style>
